<template>
	<view class="">
		<view class="InfoList flex">
			<view class="">头像</view>
			<view class="flex">
				<view class="portrait"  @tap="chooseImage()"><image :src="UserInfo.member_avatar||'/static/images/Station.png'" mode=""></image></view>
				<image class="rightarrow" :src="`${picUrl}/w/rt.png`" mode=""></image>
			</view>
		</view>
		<view class="InfoList flex">
			<view class="">账号</view>
			<view class="flex">
				<input maxlength="20" type="text" v-model="UserInfo.member_name" placeholder="账号"/>
				<!-- <view class="">2333333</view> -->
				<image class="rightarrow" :src="`${picUrl}/w/rt.png`" mode=""></image>
			</view>
		</view>
		<view class="InfoList flex">
			<view class="">昵称</view>
			<view class="flex">
				<input maxlength="20" type="text" v-model="UserInfo.nick_name" placeholder="昵称"/>
				<image class="rightarrow" :src="`${picUrl}/w/rt.png`" mode=""></image>
			</view>
		</view>
		<view class="InfoList flex">
			<view class="">性别</view>
			<view class="Gender flex">
				<view :class="UserInfo.member_sex==1||UserInfo.member_sex==null?'choice':''" @click="Gender(1)">男</view>
				<view :class="UserInfo.member_sex==0?'choice':''" @click="Gender(0)">女</view>
			</view>
		</view>
		<view class="InfoList flex">
			<view class="">个性签名</view>
			<view class="flex">
				<input maxlength="20" type="text" v-model="UserInfo.sign_text" placeholder="个性签名"/>
				<image class="rightarrow" :src="`${picUrl}/w/rt.png`" mode=""></image>
			</view>
		</view>
		<view class="preservation" @click="setInfo()">保存资料</view>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :width="60" :height="60" ></kps-image-cutter>
		
	</view>
</template>

<script>
	const requImg = require("../../../common/api_sign/requImg.js")
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components: {kpsImageCutter},
		data() {
			return {
				num:0,
				account:"",
				Nickname:"",
				autograph:"",
				url: "",
				UserInfo:"",
				header:"",
				fileName:""
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
			    title:"编辑资料"
			});
			this.getInfo();
		},
		methods: {
			getInfo(){//获取会员信息
				this.$util.request({
					url: '/live/index.php?act=api-member_live&op=getMemberInfo',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.UserInfo=res.datas.info
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
				
			},
			setInfo(){//修改会员信息
				this.$util.request({
					url: '/live/index.php?act=api-member_live&op=changeMemberInfo',
					method: 'post',
					data: {
						nick_name:this.UserInfo.nick_name,
						sign_text:this.UserInfo.sign_text,
						member_avatar:this.fileName,
						member_sex:this.num
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						uni.showToast({
							title:"保存成功",
							icon:"none",
							success() {
								setTimeout(()=>{
									uni.navigateBack({})
								},1000)
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			
			Gender(index){
				this.num=index
				this.UserInfo.member_sex=index
			},
			onok(ev) {
				this.header=ev.path
				this.upImg(ev.path,this.$apiurl+"index.php?act=member_index&op=upload_avatar");
				this.url = "";
			},
			
			
			
			chooseImage() {
				 let that=this
				uni.chooseImage({
					count:1,
					success: (res) => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];
						
					}
				});
			},
			upImg(Imgurl,url){
				let that=this;
				let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type="+that.$uploadType.uploadtype002);
				 var uper = uni.uploadFile({
				  url:'index.php?act=upload&op=uploadFile',
				  filePath:Imgurl,
				  name: 'file',
				  formData: {
				    key:data.key,
					buss_type:data.buss_type,
					api_sign:data.api_sign, 
					comefrom:data.comefrom,
					api_time:data.api_time,
					// api_member_id:data.api_member_id,
					// api_member_name:data.api_member_name,
				 },
				  success(res1) {
					  that.imgInfo=res1.data
					  let ImgInfo=JSON.parse(res1.data)
					  if(ImgInfo.error_code==0){
						  uni.showToast({
						  	icon:"loading",
							title:"图片上传中...",
							success() {
								setTimeout(()=>{
									if(ImgInfo.datas.file_url){
										that.UserInfo.member_avatar=Imgurl
										that.fileName=ImgInfo.datas.file_name;
									}
								},1000)
							}
						  })
					  }else{
						  uni.showToast({
						  	title:ImgInfo.message,
							icon:"none"
						  })
					  }
				  },
				  })
			}
		}
	}
</script>

<style scoped>
	.preservation{
		background-color:#E82C58;
		margin: 200rpx 40rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		color: #FFF9FC;
	}
	.choice{
		background-color:#E82C58 !important;
		color: #FFFFFF !important;
	}
	.Gender view{
		border: 1rpx solid #E82C58;
		padding: 0 20rpx;
		line-height: 40rpx;
		margin-left: 20rpx;
		border-radius: 25rpx;
		color: #E82C58;
	}
	.portrait image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.rightarrow{
		width: 15rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}
	.InfoList input{
		width: 150rpx;
		text-align: right;
	}
	.InfoList{
		padding:20rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>
